<!--
 * @Description  : 
 * @Author       : zhao
 * @Date         : 2022-10-20 11:20:21
 * @LastEditors  : zhao
 * @LastEditTime : 2022-11-04 11:57:18
-->
<template>
	<div class="mapCon" id="mapId">
		<div class="dropdown">
			<el-dropdown placement="bottom" @command="handleCommand">
				<span class="el-dropdown-link"> 功能列<i class="el-icon-arrow-down el-icon--right"></i> </span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="连线">连线</el-dropdown-item>
					<el-dropdown-item command="添加节点">添加节点</el-dropdown-item>
					<el-dropdown-item command="修正节点">修正节点</el-dropdown-item>
					<el-dropdown-item command="编辑节点信息">编辑节点信息</el-dropdown-item>
					<el-dropdown-item command="删除节点">删除节点</el-dropdown-item>
					<!-- <el-dropdown-item command="修正连线">修正连线</el-dropdown-item> -->
					<el-dropdown-item command="删除连线">删除连线</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
		<!-- <el-color-picker v-model="color" show-alpha :predefine="predefineColors"> </el-color-picker> -->

		<el-dialog style="min-width: 500px" title="新增节点信息" :visible.sync="dialogVisible_add" :show-close="false" :modal="false" width="30%" :before-close="handleDialogClose">
			<el-form ref="ruleForm_add" :model="addForm" label-width="140px" :rules="rules">
				<!-- <el-form-item label="所属分段编码" prop="plSectionCode">
					<el-input v-model="addForm.plSectionCode" size="medium" clearable></el-input>
				</el-form-item>
				<el-form-item label="节点编码" prop="code">
					<el-input disabled v-model="addForm.code" size="medium" clearable></el-input>
				</el-form-item>-->
				<el-form-item label="节点外部编码" prop="codeExtsys">
					<el-input v-model="addForm.codeExtsys" size="medium" clearable></el-input>
				</el-form-item>
				<el-form-item label="节点名称" prop="name">
					<el-input v-model="addForm.name" size="medium" clearable></el-input>
				</el-form-item>
				<el-form-item label="节点类型" prop="type">
					<el-select v-model="addForm.type" @change="selectchange" placeholder="节点类型" size="medium" style="width: 100%" clearable>
						<el-option label="三通" :value="100"></el-option>
						<el-option label="拐点" :value="200"></el-option>
						<el-option label="末端" :value="300"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="位置描述" prop="address">
					<el-input v-model="addForm.address" size="medium" clearable></el-input>
				</el-form-item>
				<el-form-item label="经度" prop="longitude">
					<el-input disabled v-model="addForm.longitude" size="medium" clearable></el-input>
				</el-form-item>
				<el-form-item label="纬度" prop="latitude">
					<el-input disabled v-model="addForm.latitude" size="medium" clearable></el-input>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" @click="onSubmit('ruleForm_add')">确认</el-button>
					<el-button @click="delAppointPonint">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
// import OSM from "ol/source/OSM";
import XYZ from 'ol/source/XYZ';
import { defaults } from 'ol/interaction';
import { Vector as SourceVec, Cluster } from 'ol/source';
import { Snap, Draw, Modify, Select, Pointer } from 'ol/interaction';
import { Feature, control } from 'ol';
import { unByKey } from 'ol/Observable';
import { Style, Icon, Fill, Stroke, Text, Circle as CircleStyle } from 'ol/style';
import { LinearRing, Point, Polygon, Circle as geomCircle, LineString } from 'ol/geom'; // 点线面
import { Vector as VectorLayer } from 'ol/layer'; // 实例化一个矢量图层Vector作为绘制层
import img from '@/assets/img/yuan.png';
import img_guaidian from '@/assets/img/guaidian.png';
import img_santong from '@/assets/img/santong.png';
import img_changzhan from '@/assets/img/changzhan.png';
import img_diaodu from '@/assets/img/diaodu.png';
export default {
	name: 'zmap',
	data() {
		return {
			map: null, //地图实例
			mapList: [],
			lineData: [], //连线
			initLineData: [],
			markerLayer: null, //标注图层 点
			sourceArr: null, //绘制层实例 点
			markerLayerLine: null, //标注图层 线
			sourceArrLine: null, //绘制层实例 线
			drawLine: null, //交互编辑 添加线实例
			mapRange: {}, //地图范围
			resizeTag: true,
			singleclick: null, //点击事件实例
			dialogVisible_add: false,
			addForm: {
				plSectionCode: '13130101001001001',
				code: '14130101001001000001',
				codeExtsys: '14130101001001000001',
				type: 100,
				name: '节点',
				address: '天安门',
			},
			dialogVisible_edit: false,
			editForm: {},
			optionstype: [
				{ value: 100, label: '三通' },
				{ value: 200, label: '拐点' },
				{ value: 300, label: '末端' },
			],
			rules: {
				plSectionCode: [
					{ required: true, message: '请输入所属分段编码', trigger: 'blur' },
					{ min: 17, max: 17, message: '编码长度为17位', trigger: 'blur' },
				],
				code: [
					{ required: true, message: '请输入节点编码', trigger: 'blur' },
					{ min: 20, max: 20, message: '编码长度为20位', trigger: 'blur' },
				],
				codeExtsys: [{ required: true, message: '请输入节点外部编码', trigger: 'blur' }],
				name: [{ required: true, message: '请输入节点名称', trigger: 'blur' }],
				type: [{ required: true, message: '请输入节点类型', trigger: 'change' }],
				address: [{ required: true, message: '请输入位置描述', trigger: 'blur' }],
				longitude: [{ required: true, message: '请输入经度', trigger: 'blur' }],
				latitude: [{ required: true, message: '请输入纬度', trigger: 'blur' }],
			},
			color: '#ff4500',
			predefineColors: [
				'#ff4500',
				'#ff8c00',
				'#ffd700',
				'#90ee90',
				'#00ced1',
				'#1e90ff',
				'#c71585',
				'rgba(255, 69, 0, 0.68)',
				'rgb(255, 120, 0)',
				'hsv(51, 100, 98)',
				'hsva(120, 40, 94, 0.5)',
				'hsl(181, 100%, 37%)',
				'hsla(209, 100%, 56%, 0.73)',
				'#c7158577',
			],
			//手动添加要素 点击在线段 获取线段经纬
			addPointLonlat: '',
			pl_section_code: '13130101001001001',
		};
	},
	props: {
		mapData: {
			//地图渲染数据
			type: Object,
			default: () => ({ center: [116.394926, 39.9125], zoom: 11 }),
		},
		list: Array,
		mapId: String,
	},
	components: {},

	computed: {},
	watch: {
		lineData(val) {
			this.$store.state.piplineNodeInfo.pipLineNodeInfoList = [...this.initLineData, ...val];
		},
	},
	mounted() {
		this.init();
	},

	methods: {
		setStyle(firstColor) {
			let color = firstColor || this.color;
			let style = new Style({
				//形状
				image: new CircleStyle({
					radius: 5,
					fill: new Fill({
						color: color,
					}),
				}),
				//边线颜色
				stroke: new Stroke({
					color: color,
					width: 3,
				}),
			});
			return style;
		},
		//获取节点
		async getNodeInfoList() {
			this.delMarker();
			const res = await this.$store.dispatch('piplineNodeInfo/findNodes', this.mapRange);
			const res2 = await this.$store.dispatch('piplineNodeInfo/findStations', this.mapRange);
			const res3 = await this.$store.dispatch('piplineNodeInfo/findDevices', this.mapRange);
			this.mapList = [...res.data, ...res2.data, res3.data];

			this.addMarker();
			this.initLine();
		},
		//初始化
		init() {
			const mapId = this.mapId;
			this.map = new Map({
				// controls: defaultControls().extend([overviewMapControl]),
				target: 'mapId',
				layers: [
					new TileLayer({
						source: new XYZ({
							url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + this.$store.state.map.key,
							crossOrigin: 'anonymous',
							opaque: 'true',
						}),
					}),

					new TileLayer({
						source: new XYZ({
							url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + this.$store.state.map.key,
							crossOrigin: 'anonymous',
						}),
					}),
				],

				view: new View({
					center: this.mapData.center,
					projection: 'EPSG:4326',
					zoom: this.mapData.zoom,
					// maxZoom: 8,
					// minZoom: 11,
				}),
				interactions: new defaults({
					doubleClickZoom: false, //屏蔽双击放大事件
				}),
			});

			this.sourceArrLine = new SourceVec({});
			this.markerLayerLine = new VectorLayer({
				source: this.sourceArrLine,
				style: this.setStyle(),
			});
			this.map.addLayer(this.markerLayerLine);

			this.sourceArr = new SourceVec({});
			this.markerLayer = new VectorLayer({
				style: this.setStyle('#ffcc33'),
				source: this.sourceArr,
			});
			this.map && this.map.addLayer(this.markerLayer);

			//双击退出编辑
			this.map.on('dblclick', (dblclick) => {
				this.map.removeInteraction(this.drawLine);
			});

			this.getMapRange();
			this.map.getView().on('propertychange', this.getMapRange);

			window.addEventListener('resize', this.getMapRange);
		},
		getPipLineNodeData() {
			this.$store.dispatch('piplineNodeInfo/findNodes', this.mapRange);
		},
		handleCommand(command) {
			this.map.removeInteraction(this.drawLine);
			unByKey(this.singleclick);
			switch (command) {
				case '连线':
					this.addGeomLine();
					break;
				case '添加节点':
					this.addPoint();
					break;
				case '修正节点':
					this.modifyPoint();
					break;
				case '删除节点':
					this.delPonint();
					break;
				case '编辑节点信息':
					this.connection();
					break;
				case '修正连线':
					this.modifyLine();
					break;
				case '删除连线':
					this.delLine();
					break;
			}
		},
		// 初始化标注
		addMarker() {
			// 创建画板

			// this.delMarker();

			this.mapList.forEach((e) => {
				const feature = new Feature({
					geometry: new Point([e.longitude, e.latitude]),
					name: e.nodeId,
				});
				let image = img;
				// if (e.type == 100) image = img_santong;
				// if (e.type == 200) image = img_guaidian;
				let style = new Style({
					//形状
					image: new Icon({
						opacity: 1,
						src: image,
						scale: '1', // 图片缩放比例
						// rotation: 90,
					}),
				});

				feature.setStyle(style); //#ffcc33
				// feature.set('plSectionCode', e.plSectionCode);
				feature.set('nodeId', e.nodeId);
				feature.set('code', e.code);
				feature.set('codeExtsys', e.codeExtsys);
				feature.set('name', e.name);
				feature.set('type', e.type);
				feature.set('address', e.address);

				feature.set('longitude', e.longitude);
				feature.set('latitude', e.latitude);

				this.sourceArr.addFeature(feature);
			});
		},
		// 删除绘制
		delMarker() {
			if (this.sourceArr != null) {
				this.sourceArr.clear();
			}
			if (this.sourceArrLine != null) {
				this.sourceArrLine.clear();
			}

			// this.markerLayer && this.map.removeLayer(this.markerLayer);
		},
		//点击要素点
		connection() {
			this.singleclick = this.map.on('singleclick', (e) => {
				var features = this.map.getFeaturesAtPixel(e.pixel, { hitTolerance: 1 });

				this.$emit('openEdit', features[0].values_, true);
			});
		},
		//连线
		addGeomLine() {
			this.map.removeInteraction(snap);
			//创建一个线
			this.drawLine = new Draw({
				type: 'LineString',
				source: this.sourceArrLine,
				sourceConstrain: this.sourceArr,
				stopClick: true,
				style: this.setStyle('#f47920'),
				condition: (event) => {
					let flag = 0;
					let features = this.map.getFeaturesAtPixel(event.pixel);
					features.some((element) => {
						if (this.sourceArr.hasFeature(element)) {
							let newFeatures = [element.values_.longitude, element.values_.latitude];
							let arr = [];
							if (arr.length > 0) {
								arr.map((e, index) => {
									if (e.latitude == newFeatures[1] && e.longitude == newFeatures[0]) arr[index] = 'undefined';
								});
							}
							arr.push(element.values_);

							arr = arr.filter((res) => {
								return res != 'undefined';
							});
							this.$store.state.piplineNodeInfo.pipLineNodeInfoList = arr;

							/****************   生成传入后端线段串  *********************/
							// this.lineData.map((e, index) => {
							// 	if (this.lineData.length > index + 1) {
							// 		if (e.nodeId == this.lineData[index + 1].nodeId) {
							// 			flag = 1;
							// 			return true;
							// 		}
							// 	}
							// });

							if (this.lineData.length < 2) {
								this.lineData.push(element.values_);
							} else {
								this.lineData.push(this.lineData[this.lineData.length - 1]);
								this.lineData.push(element.values_);
							}

							flag = 1;
							return true;
						}
					});

					if (flag == 1) return true;
				},
			});
			var snap = new Snap({
				source: this.sourceArr,
			});

			this.map.addInteraction(this.drawLine);

			this.map.addInteraction(snap);

			this.drawLine.on('drawend', (evt) => {
				// const ldata = this.lineData.splice(0, 1);...this.initLineData,
				this.lineData.pop();
				this.lineData.pop();
				const newLineArr = [...this.initLineData, ...this.lineData];

				// newLineArr.map((e, index) => {
				// 	if (newLineArr.length > index + 1) {
				// 		if (e.nodeId == newLineArr[index + 1].nodeId) newLineArr.splice(1, index + 1);
				// 	}
				// });

				this.addLine(newLineArr);
			});

			this.drawLine.on('drawstart', (evt) => {
				const lonlat = evt.feature.values_.geometry.flatCoordinates;

				// evt.feature.set('plSectionCode', e.plSectionCode);
				// evt.feature.set('code', e.code);
				// evt.feature.set('codeExtsys', e.codeExtsys);
				// evt.feature.set('name', e.name);
				// evt.feature.set('type', e.type);
				// evt.feature.set('address', e.address);

				// evt.feature.set('longitude', e.longitude);
				// evt.feature.set('latitude', e.latitude);
			});
		},

		//手动添加要素点
		addPoint() {
			this.singleclick = this.map.on('singleclick', (e) => {
				var features = this.map.getFeaturesAtPixel(e.pixel, { hitTolerance: 1 })[0];

				if (features) {
					let value = features.values_;
					if (value.geometry instanceof Point) {
						console.log('点');
					}
					if (value.geometry instanceof LineString) {
						this.addPointLonlat = value.geometry.flatCoordinates;
					}
				}
				const feature = new Feature({
					geometry: new Point([e.coordinate[0], e.coordinate[1]]),
				});
				let image = img;
				// if (e.type == 100) image = img_santong;
				// if (e.type == 200) image = img_guaidian;
				let style = new Style({
					//形状
					image: new Icon({
						opacity: 1,
						src: image,
						scale: '1', // 图片缩放比例
						// rotation: 90,
					}),
				});

				feature.setStyle(style); //#ffcc33

				this.sourceArr.addFeature(feature);

				this.addForm.longitude = e.coordinate[0];
				this.addForm.latitude = e.coordinate[1];
				this.dialogVisible_add = true;
			});

			// this.addForm = {};
			// let style = new Style({
			// 	//形状
			// 	image: new Icon({
			// 		opacity: 1,
			// 		src: img,
			// 		scale: '1', // 图片缩放比例
			// 	}),
			// });
			// this.drawLine = new Draw({
			// 	//绘制层数据源
			// 	source: this.sourceArr,
			// 	/** @type {ol.geom.GeometryType}几何图形类型 */
			// 	type: 'Point',
			// 	sourceConstrain: this.sourceArrLine,
			// 	// style: this.setStyle,
			// });
			// this.drawLine.on('drawend', (e) => {
			// 	var coordinates_Point = e.feature.getGeometry().getCoordinates();
			// 	let value = e.feature.values_;
			// 	if (value.geometry instanceof Point) {
			// 		console.log('点');
			// 	}
			// 	if (value.geometry instanceof LineString) {
			// 		console.log('线');
			// 	}

			// 	if (e.feature.values_.geometry) {
			// 	}
			// 	this.mapList.push({
			// 		longitude: coordinates_Point[0],
			// 		latitude: coordinates_Point[1],
			// 	});
			// 	this.addForm.longitude = coordinates_Point[0];
			// 	this.addForm.latitude = coordinates_Point[1];
			// 	this.dialogVisible_add = true;
			// });
			// this.markerLayer.setStyle(style);

			// this.map.addInteraction(this.drawLine);
		},
		//modify
		modifyPoint() {
			this.drawLine = new Modify({
				source: this.sourceArr,
				condition: (event) => {
					let flag = 0;
					let features = this.map.getFeaturesAtPixel(event.pixel);
					features.some((element) => {
						if (this.sourceArr.hasFeature(element)) {
							flag = 1;
							if (element.values_.type > 300) flag = 2;
							return true;
						}
					});

					if (flag == 1) return true;
					if (flag != 1) return false;
				},
			});
			this.map.addInteraction(this.drawLine);

			this.drawLine.on('modifyend', (evt) => {
				var extent = evt.features.item(0).getGeometry().getCoordinates();
				let obj = evt.features.array_[0].values_;

				this.mapList.map(async (e) => {
					if (e.nodeId == obj.nodeId) {
						e.longitude = extent[0];
						e.latitude = extent[1];
						const res = await this.$store.dispatch('piplineNodeInfo/updateNode', e);
						this.sourceArrLine.clear();
						this.initLine();
					}
				});

				// this.mapList.map((e, index) => {
				// 	if (e.code == obj.code) {
				// 		e.longitude = extent[0];
				// 		e.latitude = extent[1];
				// 	}
				// });
			});
		},
		delPonint() {
			this.singleclick = this.map.on('singleclick', async (e) => {
				var features = this.map.getFeaturesAtPixel(e.pixel, { hitTolerance: 1 });
				let value = features[0].values_;

				if (value.type > 300) return;
				if (value.geometry instanceof Point) {
					const lonlat = value.geometry.flatCoordinates;

					// let newLineArr = [...this.initLineData, ...this.lineData];
					// const oldLineArr = [...newLineArr];
					// oldLineArr.forEach((e, index) => {
					// 	if (e.longitude == lonlat[0] && e.latitude == lonlat[1]) {
					// 		if (index % 2 == 0) {
					// 			newLineArr.splice(index, 2, null, null);
					// 		} else {
					// 			newLineArr.splice(index - 1, 2, null, null);
					// 		}
					// 	}
					// });
					// newLineArr = newLineArr.filter((e) => e != null);
					// this.addLine(newLineArr);

					this.sourceArr.removeFeature(features[0]);
					await this.$store.dispatch('piplineNodeInfo/deleteNode', { nodeId: value.nodeId });
					this.getNodeInfoList();
				}
				if (value.geometry instanceof LineString) {
				}
			});
		},
		delLine() {
			this.singleclick = this.map.on('singleclick', (e) => {
				var features = this.map.getFeaturesAtPixel(e.pixel, { hitTolerance: 1 });
				const lonlat = features[0].values_.geometry.flatCoordinates;

				let newLineArr = [...this.initLineData, ...this.lineData];
				newLineArr.some((e, index) => {
					if (newLineArr[index + 1]) {
						if (e.longitude == lonlat[0] && e.latitude == lonlat[1] && newLineArr[index + 1].longitude == lonlat[2] && newLineArr[index + 1].latitude == lonlat[3]) {
							newLineArr.splice(index, 2);

							return true;
						}
					}
				});

				// let newArr = [];
				// this.initLineData[0].map((e, index) => {
				// 	if (index > 0) {
				// 		if (e.longitude != lonlat[0] && e.latitude != lonlat[1] && this.initLineData[0][index].longitude != lonlat[3] && this.initLineData[0][index].latitude != lonlat[4]) {
				// 			newArr.push(e);
				// 			// newArr.push(e[index2]);
				// 		}
				// 	}
				// });

				console.log('🚀 ~ file: map.vue ~ line 616 ~ this.singleclick=this.map.on ~ newLineArr', newLineArr);
				this.addLine(newLineArr);
				this.sourceArrLine.removeFeature(features[0]);
			});
		},
		modifyLine() {
			this.drawLine = new Modify({
				source: this.sourceArrLine,
				condition: (event) => {
					let flag = 0;
					let features = this.map.getFeaturesAtPixel(event.pixel);
					features.some((element) => {
						if (this.sourceArrLine.hasFeature(element)) {
							flag = 1;
							return true;
						}
					});

					if (flag == 1) return true;
				},
			});
			this.map.addInteraction(this.drawLine);

			this.drawLine.on('modifyend', (evt) => {
				var extent = evt.features.item(0).getGeometry().getCoordinates();
				let obj = evt.features.array_[0].values_;

				this.mapList.map((e, index) => {
					if (e.code == obj.code) {
						e.longitude = extent[0];
						e.latitude = extent[1];
					}
				});
			});
		},
		async initLine() {
			if (this.sourceArrLine != null) {
				this.sourceArrLine.clear();
			}

			const res = await this.$store.dispatch('piplineNodeInfo/findSectionSections', { code: '13130101001001001' });

			this.initLineData = res.data;
			this.$store.state.piplineNodeInfo.pipLineNodeInfoList = res.data;
			let lineString = [];
			res.data.map((e, index) => {
				// 就近相连 [[1,2],[2,3]]
				// lineString.push([e.longitude * 1, e.latitude * 1]);
				// if (index > 1) {
				// 	if (!res.data[index + 1]) return;
				// 	// let olddata = res.data[index - 1].split(',');
				// 	lineString.push([res.data[index + 1].longitude * 1, res.data[index + 1].latitude * 1]);
				// }

				// if (lineString.length == 2) {
				// 	var line = new Feature({
				// 		geometry: new LineString(lineString),
				// 	});
				// 	this.sourceArrLine.addFeature(line);
				// 	lineString = [];
				// }

				// 下标奇偶 两两相连 [[1,2],[3,4]]
				if (index % 2 == 0) {
					if (!res.data[index + 1]) return;
					lineString.push([e.longitude * 1, e.latitude * 1], [res.data[index + 1].longitude * 1, res.data[index + 1].latitude * 1]);

					var line = new Feature({
						geometry: new LineString(lineString),
					});
					this.sourceArrLine.addFeature(line);
					lineString = [];
				}
			});
		},

		getMapRange() {
			if (this.resizeTag) {
				const ex = this.map.getView().calculateExtent(this.map.getSize());

				this.mapRange = {
					scopea: Number(ex[0]) + ',' + Number(ex[1]),
					scopeb: Number(ex[2]) + ',' + Number(ex[3]),
				};
				// this.getPipLineNodeData();
				this.resizeTag = false;
				setTimeout(() => {
					this.resizeTag = true;
				}, 200);
				this.getNodeInfoList();
			}
		},
		//删除最后一个点
		delAppointPonint(type) {
			const features = this.sourceArr.getFeatures();
			console.log('🚀 ~ file: map.vue ~ line 633 ~ delAppointPonint ~ features', features);
			this.sourceArr.removeFeature(features[features.length - 1]);
			this.dialogVisible_add = false;
		},
		onSubmit(formName) {
			this.$refs[formName].validate(async (valid) => {
				if (valid) {
					let obj = { ...this.addForm };

					obj.type = this.pad(obj.type, 4);

					let lonlat = this.addPointLonlat;

					if (lonlat.length > 0) {
						let newLineArr = [...this.initLineData, ...this.lineData];
						newLineArr.some((e, index) => {
							if (newLineArr[index + 1]) {
								if (e.longitude == lonlat[0] && e.latitude == lonlat[1] && newLineArr[index + 1].longitude == lonlat[2] && newLineArr[index + 1].latitude == lonlat[3]) {
									newLineArr.splice(index + 1, 0, obj, obj);
									return true;
								}
							}
						});
						this.addLine(newLineArr);
					}

					let obj2 = {};
					obj2[this.pl_section_code] = obj;
					delete obj2.code;
//con这个文件不用，用map2
					await this.$store.dispatch('piplineNodeInfo/addNode', obj2);

					this.dialogVisible_add = false;
					this.getNodeInfoList();
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		onSubmit_edit() {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.$store.dispatch('piplineNodeInfo/updateNode', this.editForm);
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		handleDialogClose() {
			this.dialogVisible_add = false;
			this.dialogVisible_edit = false;
		},
		selectchange() {
			console.log('s');
			// this.addForm = { ...this.addForm };
		},
		pad(num, cover) {
			return String('0'.repeat(cover) + num).slice(-cover);
		},

		async addLine(data) {
			console.log(data);
			let objs = {};
			data.map((e, index) => {
				objs[index + 1] = e.code;
			});

			await this.$store.dispatch('piplineNodeInfo/updateLineNodes', { data: objs, sectionCode: this.pl_section_code });
			this.initLine();
		},
		//获取厂站

		getStation() {},
	},
};
</script>
<style lang='scss' scoped>
.mapCon {
	width: 100%;
	height: 100%;
}
.el-dialog {
	min-width: 500px !important;
}
.dropdown {
	position: absolute;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.7);
	color: white;

	top: 10px;
	right: 40px;
	padding: 3px 10px;
	border-radius: 3px;

	.el-dropdown-link {
		cursor: pointer;
		color: white;
	}
	.el-icon-arrow-down {
		font-size: 12px;
	}
}
.el-color-picker {
	position: absolute;
	z-index: 1000;

	top: 10px;
	right: 120px;
	padding: 0px 10px;
}
</style>